{% raw %}
<script id="tmpl_infobox" type="text/x-dot-template">
    <div class="infobox infobox-{{=it.status_color }}" style="width:110px">

            <div class="infobox-icon" style="min-width:40px"><i class="{{=it.status_icon }}"></i></div>
            <div class="infobox-data" style="min-width:50px"><span class="infobox-data-number">{{=it.tasks_count }}</span>

                <div class="infobox-content">
                    <a data-target="#html_template"
                       data-toggle="modal"
                       data-keyboard=false
                       href="/entities/{{=it.entity_id }}/tasks/filter/{{=it.status_id }}/list"
                       class="{{=it.status_color }}">{{=it.status_code }}</a>
                </div>

            </div>

    </div>

</script>
{% endraw %}




<script class="code" type="text/javascript">
    $(document).ready(function () {
        var infobox = $('#infobox');
        var infobox_template = doT.template($('#tmpl_infobox').html());

        $.getJSON(infobox.attr('address')).then(function (data) {

            var sorting_path = ['WFD','RTS','WIP', 'OH','STOP', 'PREV','HREV', 'DREV', 'CMPL'];
            var sorted_data = [];

            var index = -1;
            for (var i = 0; i < data.length; i++) {

                data[i].entity_id = '{{ entity.id }}';
                if(data[i].status_icon == ''){
                   data[i].status_icon = get_icon(data[i].status_code);
                }

                index = sorting_path.indexOf(data[i].status_code.toString());
                if (index !== -1){
                    sorted_data[index] = data[i];
                }
            }

            for (var k = 0; k < sorted_data.length; k++) {
                if(sorted_data[k]){
                    infobox.append(infobox_template(sorted_data[k]));
                }
            }
        });

    });
</script>

